import React, {Component} from 'react'
import {Link} from 'react-router'

import {Menu, Breadcrumb, Icon} from 'antd'
import '../../entries/layout.css'

const SubMenu = Menu.SubMenu;


export class Main extends Component {
    render() {
        let bread = {
            fist: '首页'
        }
        return (
            <div>
                <Header/>
                <MenuLayout/>
                {this.props.children}
            </div>
        );
    }
}

class Header extends Component{
    render(){
        return(
            <header className="navbar-warpper">
                <div className="navbar navbar-black">
                    <div className="container-fluid cl">
                        <a className="logo navbar-logo">飘框架,自己开发</a>
                    </div>
                </div>
            </header>
        )
    }
}

export class Content extends Component {
    render() {
        let {bread}=this.props;
        return (
            <section className="p-article-box">
                <Bread crumb={bread}/>
                <div className="p-article mr-15">
                    <article className="cl pd-20">
                            {this.props.children}
                    </article>
                </div>
            </section>
        )
    }
}

export class MenuLayout extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <aside className="p-aside">
                <Menu mode="inline" theme="dark">
                    <SubMenu key="sub1" title={<span><Icon type="user"/>管理员管理</span>}>
                        <Menu.Item key="1"><Link to="/user">用户管理</Link></Menu.Item>
                        <Menu.Item key="2">角色管理</Menu.Item>
                        <Menu.Item key="3">权限管理</Menu.Item>
                    </SubMenu>
                    <SubMenu key="sub2" title={<span><Icon type="laptop"/>Api管理</span>}>
                        <Menu.Item key="4">Api信息管理</Menu.Item>
                        <Menu.Item key="5">Api调用说明</Menu.Item>
                        <Menu.Item key="6">Api错误代码</Menu.Item>
                    </SubMenu>
                    <SubMenu key="sub3" title={<span><Icon type="notification"/>Api申请</span>}>
                        <Menu.Item key="7">Api申请记录</Menu.Item>
                        <Menu.Item key="8">申请审核</Menu.Item>
                    </SubMenu>
                    <SubMenu key="sub4" title={<span><Icon type="message"/>日志管理</span>}>
                        <Menu.Item key="9">调用日志</Menu.Item>
                    </SubMenu>
                </Menu>
            </aside>
        )
    }
}

export class Bread extends Component {
    render() {
        let {crumb = {fist: '第一页', sec: '应用列表', th: '某应用'}}=this.props;
        let item;
        if (crumb.fist && crumb.sec && crumb.th) {
            item = (<Breadcrumb>
                <Breadcrumb.Item><Link to="/">{crumb.fist}</Link></Breadcrumb.Item>
                <Breadcrumb.Item>{crumb.sec}</Breadcrumb.Item>
                <Breadcrumb.Item>{crumb.th}</Breadcrumb.Item>
            </Breadcrumb>);
        } else if (crumb.fist && crumb.sec) {
            item = (<Breadcrumb>
                <Breadcrumb.Item><Link to="/">{crumb.fist}</Link></Breadcrumb.Item>
                <Breadcrumb.Item>{crumb.sec}</Breadcrumb.Item>
            </Breadcrumb>)
        } else if (crumb.fist) {
            item = (<Breadcrumb>
                <Breadcrumb.Item><Link to="/">{crumb.fist}</Link></Breadcrumb.Item>
            </Breadcrumb>)
        }
        return (
            <div className="antLayoutBreadcrumb">
                {item}
            </div>
        )
    }
}
